/**
 * @author QL
 * @param { Object } echartsOperation
 * @date 2021-12-30 17:21:47
 * @description 用于生成vuex Store实例的“分块模式”状态库配置对象
 * 若新增store模块，直接拷贝当前模块定义代码，清楚除固有state值之外的其他所有state变量，再到index.js中定义新的模块名引用新模块文件的配置对象即可完成一个纯净的新模块库
 */
import Vue from 'vue'

const echartsOperation = {

    /**
     * @author QL
     * @param { Boolean } namespaced 
     * @date 2021-12-30 17:23:16
     * @description Store 配置对象分块的核心配置变量 用于状态存储分块的命名空间隔离相互独立避免合并命名空间，避免出现多库合并命名，造成命名重复的异常问题
     */
    namespaced: true,

    /**
     * @author QL
     * @param { Object } state 
     * @date 2021-12-30 17:23:16
     * @description Store 配置对象的核心配置变量 用于状态存储的对象
     */
    state: {
        /**
         * @author QL
         * @param { Array } chartIds 
         * @date 2022-01-04 13:54:55
         * @description 图表容器的id列表，用作遍历鉴别获取相应容器对象 和 option数据配置对象
         */
        chartIds: ['barChart', 'barChart2', 'barChart3'],

        /**
         * @author QL
         * @param { Object } chartContainers 
         * @date 2022-01-04 13:53:28
         * @description 图表容器对象的缓存变量
         */
        chartContainers: {
            barChart_con: {},
            barChart2_con: {},
            barChart3_con: {},
        },

        /**
         * @author QL
         * @param { Object } chartOptions 
         * @date 2022-01-04 13:56:36
         * @description 图表option数据配置对象的缓存变量
         */
        chartOptions: {
            barChart_Option: {
                xAxis: {
                    type: "category",
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                }, //X轴
                yAxis: { type: "value" }, //Y轴
                series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: "bar" }], //配置项
            },

            barChart2_Option: {
                xAxis: {
                    type: "category",
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                }, //X轴
                yAxis: { type: "value" }, //Y轴
                series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: "line" }], //配置项
            },

            barChart3_Option: {
                title: {
                    text: '圆环图示例',
                    left: 'center',
                    top: 'center'
                },
                series: [
                    {
                        type: 'pie',
                        data: [
                            {
                                value: 335,
                                name: 'A'
                            },
                            {
                                value: 234,
                                name: 'B'
                            },
                            {
                                value: 1548,
                                name: 'C'
                            }
                        ],
                        radius: ['40%', '70%']
                    }
                ]
            }
        },


        /**
         * @author QL
         * @param { Object } globalError 
         * @date 2021-12-30 17:35:26
         * @description 自定义固有State消息状态， 用于返回getters, mutation二次包装方法出现的异常消息
         */
        globalError: {
            det: "vuex state error",
            msg: "未声明定义的state状态变量！"
        },

        /**
         * @author QL
         * @param { Object } globalSuccess 
         * @date 2021-12-30 17:36:30
         * @description 自定义固有State消息状态， 用于返回 mutation 二次包装方法回调函数的操作状态消息
         */
        globalSuccess: {
            det: "vuex state",
            msg: "operation success"
        }
    },


    /**
     * @author QL
     * @param { Object } getters 
     * @date 2021-12-30 17:23:16
     * @description Store 配置对象的状态取值方法配置对象
     */
    getters: {
        /**
         * @author QL
         * @functionName getterChartOption
         * @param { Object } state      当前Store的 state 配置对象计算属性
         * @param { String } valueName  自定义传参， 用于匹配查询state中对应名称的状态变量
         * @date 2021-12-30 17:24:47
         * @version V..
         * @description 该方法是一个采集器方法，用于收集所有用户传入的valueName相应名称的状态变量并返回，避免每个状态都需要配置一个getter
         */
        getterChartOption: (state) => (valueName) => {
            try {
                if (state.chartIds.indexOf(valueName) != -1) {
                    return state.chartOptions[`${valueName}_Option`]
                } else {
                    throw new Error("未声明定义的图表state状态！");
                }
            } catch (err) {
                //TODO handle the exception
                state.globalError.det = `getterDispenser err: ${valueName}`;
                state.globalError.msg = err.message;
                return state.globalError;
            }
        },

        getterContainers: (state) => (valueName) => {
            try {
                if (Object.keys(state.chartContainers).indexOf(`${valueName}_con`) != -1) {
                    if (Object.keys(state.chartContainers[`${valueName}_con`]).length) {
                        return state.chartContainers[`${valueName}_con`];
                    } else {
                        throw new Error("对象未赋值!");
                    }
                } else {
                    throw new Error("未声明定义的图表state状态！");
                }
            } catch (err) {
                //TODO handle the exception
                state.globalError.det = `getterDispenser err: ${valueName}`;
                state.globalError.msg = err.message;
                return state.globalError;
            }
        }
    },


    /**
     * @author QL
     * @param { Object } getters 
     * @date 2021-12-30 17:23:16
     * @description Store 配置对象的状态赋值方法配置对象
     */
    mutations: {
        /**
         * @author QL
         * @functionName setterChartOption
         * @param { Object } state      当前Store的 state 配置对象计算属性
         * @param { String } valueName  自定义传参对象属性， 用于匹配查询state中对应名称的状态变量
         * @param { * } valueVal        自定义传参对象属性， 用于匹配到的State赋值更新状态值
         * @param { Function } fn       自定义传参对象属性， 用于回调反馈set操作是否成功的信息对象
         * @date 2021-12-30 17:29:44
         * @version V..
         * @description 该方法是一个采集器方法，用于将用户传入的valueName相匹配的State状态赋值更新成valueVal值，并通过fn回调函数返回操作的消息对象
         */
        setterChartOption: (state, { valueName, valueVal, fn }) => {
            try {
                if (state.chartIds.indexOf(valueName) != -1) {
                    Vue.set(state.chartOptions, `${valueName}_Option`, valueVal);
                    state.chartContainers[`${valueName}_con`].setOption(state.chartOptions[`${valueName}_Option`]);
                    return fn(state.globalSuccess);
                } else {
                    throw new Error("未声明定义的state状态！");
                }
            } catch (err) {
                //TODO handle the exception
                state.globalError.det = `setterDispenser err: ${valueName}`;
                state.globalError.msg = err.message;
                return fn(state.globalError);
            }
        },

        /**
         * @author QL
         * @functionName setterContainers
         * @param { Object } state      当前Store的 state 配置对象计算属性
         * @param { String } valueName  自定义传参对象属性， 用于匹配查询state中对应名称的状态变量
         * @param { * } valueVal        自定义传参对象属性， 用于匹配到的State赋值更新状态值
         * @param { Function } fn       自定义传参对象属性， 用于回调反馈set操作是否成功的信息对象
         * @date 2022-01-04 13:59:35
         * @version V..
         * @description 该方法是一个采集器方法，用于将用户传入的valueName相匹配的State状态赋值更新成valueVal值，并通过fn回调函数返回操作的消息对象
         */
        setterContainers: (state, { valueName, valueVal, fn }) => {
            try {
                if (state.chartIds.indexOf(valueName) != -1) {
                    Vue.set(state.chartContainers, `${valueName}_con`, valueVal);

                    return fn(state.globalSuccess);
                } else {
                    throw new Error("未声明定义的state状态！");
                }
            } catch (err) {
                //TODO handle the exception
                state.globalError.det = `setterDispenser err: ${valueName}`;
                state.globalError.msg = err.message;
                return fn(state.globalError);
            }
        },
    }

}

export default echartsOperation